<template>
    <div class="custom">
        <TablePage :query="query" :columns="columns" :data="data" @onLoad="onload"/>
    </div>
</template>
<script>
import TablePage from "@/components/TablePage";
import Test from './components/Test'
import {defineAsyncComponent, getCurrentInstance, h} from "vue";
export default {
    components: {TablePage},
    data() {
        return {
            query: [
                {
                    type: 'text',
                    label: '手机号',
                    placeholder: '请输入手机号查询',
                    key: 'mobile'
                },
                {
                    type: 'select',
                    label: '状态',
                    placeholder: '请选择状态查询',
                    key: 'status',
                    styles: {width: '150px'},
                    options: [
                        {label: '全部', value: ''},
                        {label: '开始', value: 'start'},
                        {label: '结束', value: 'end'},
                    ]
                }, {
                    type: 'date-picker',
                    label: '选择时间',
                    placeholder: '请选择时间',
                    key: 'time'
                }
            ],
            columns: [
                {
                    label: '测试',
                    prop: 'name',
                    width: '180px'
                },
                {
                    label: '自定义渲染',
                    type: 'render',
                    width: '180px',
                    render: (data) => {
                        return data.test ? data.test.name : '';
                    },
                },
                {
                    label: '自定义按钮组',
                    type: 'buttons',
                    width: '180px',
                    buttons: [
                        {
                            label: '查询',
                            type: 'primary',
                            styles: {},
                            icon: 'Delete',
                            callback: (data) => {
                                alert('回调' + JSON.stringify(data))
                            }
                        },
                        {
                            label: '删除',
                            type: 'danger',
                            styles: {},
                            icon: 'Delete',
                            callback: (data) => {
                                alert('回调' + JSON.stringify(data))
                            }
                        }
                    ]
                }
            ],
            data: {
                total: 1000,
                list: [],
                page: 1,
                size: 20
            },

        }
    },

    methods: {
        onload(data) {
            console.log('加载新数据', data)
            this.data.page = data.page;
            this.data.size = data.size;
            setTimeout(() => {
                this.data.list = []
                for (let i = 0; i < data.size; i++) {
                    this.data.list.push({name: `${this.data.page}-${i}`})
                }
            }, 1000)
        }
    }
}
</script>